<!DOCTYPE html>
<html>
<head>
    <title>梁羽生文学奖</title>
    <meta charset="utf-8">
    <meta name="wap-font-scale" content="no">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../node_modules/animate.css/animate.css">
    <link rel="stylesheet" href="../src/font/FZYanSJW_Zhong.css">
    <link rel="stylesheet" href="../src/css/app.less">
    <link rel="stylesheet" href="../src/css/face.less">
    <script src="/src/lib/flexible.js"></script>
</head>
<body>

<div id="body" v-cloak>
    <audio src="http://h5.oeeee.com/h5/v18/literary-award/video/face-bg.mp3" autoplay loop></audio>

    <div class="music on"></div>


    <div class="swiper-slide page1" v-if="page == 1">
        <img class="text1 animated fadeInDown" src="/src/img/face/page1-text-1.png">
        <img class="text2 animated fadeInDown delay-250" src="/src/img/face/page1-text-2.png">
        <img class="text3 animated fadeInDown delay-500" src="/src/img/face/page1-text-3.png" >
        <img class="bg-1 animated fadeIn delay-750" src="/src/img/face/page1-bg-1.png">
        <img class="btn animated fadeInLeft delay-1000" src="/src/img/face/page1-btn.png" @click="toPage(2)">
    </div>
    <div class="swiper-slide page2" v-if="page == 2">
        <img class="title animated fadeInDown" src="/src/img/face/page2-title.png">
        <img class="step animated fadeInDown delay-250" src="/src/img/face/step-1.png">
        <img class="sex-men animated fadeInRight" :class="{'delay-500' : !isSexChange}" v-show="sex=='men'" src="/src/img/face/sex-men.png">
        <img class="sex-women animated fadeInLeft" :class="{'delay-500' : !isSexChange}" v-show="sex=='women'" src="/src/img/face/sex-women.png">
        <div class="choice animated bounceIn delay-1000">
            <span :class="{true : sex=='men'}" @click="setSex('men')">男</span>
            <span :class="{true : sex=='women'}" @click="setSex('women')">女</span>
        </div>
        <img class="btn animated fadeInDown delay-1500" src="/src/img/face/btn-next.png" @click="toPage(3)">
    </div>
    <div class="swiper-slide page3" v-if="page == 3">
        <img class="title animated fadeInDown" src="/src/img/face/page3-title.png">
        <img class="step animated fadeInDown delay-250" src="/src/img/face/step-2.png">
        <ul class="lists animated fadeIn delay-500">
            <li :class="{true : item.choice}" v-for="(item,index) in sexlist" @click="choiceNature(index)" :key="index">{{ item.slogen1 }}<span>{{ item.slogen2 }}</span></li>
        </ul>
        <img class="btn animated fadeInDown" src="/src/img/face/btn-next.png" v-if="isCanToPage4" @click="toPage(4)">
    </div>
    <div class="swiper-slide page4" v-if="page == 4">
        <img class="title animated fadeInDown" src="/src/img/face/page4-title.png">
        <img class="step animated fadeInDown delay-250" src="/src/img/face/step-3.png">
        <div class="face-box animated fadeIn delay-500" :style="{'background-image':imgs[0].url?'url('+imgs[0].url+')':'none'}">
            <div class="cover" :class="{true : !imgs[0].loaded}"  @click="chooseImage()"></div>
        </div>
        <div class="text animated fadeIn delay-750">请上传您的正面照，图片大小不超500k</div>
        <a class="btn animated fadeInDown" v-if="isCanCompound" @click="faceCompound()"><img class="" src="/src/img/face/btn-compound.png"></a>
    </div>
    <div class="swiper-slide page5" v-if="page == 5">
        <div class="title">恭喜您，原来你是{{info.personage}}{{info.sex==1?'大':'女'}}侠！</div>
        <img class="share-cont" src="/src/img/face/share-cont.png">
        <div class="pic" :style="{'background-image':info.picture?'url('+info.picture+')':'none'}"></div>
        <div class="qrcode"><img class="qrcode" src="/src/img/face/qrcode.png"></div>
        <img class="btn" v-if="isSelf" src="/src/img/face/btn-share.png" @click="_shareCover(true)">
        <a class="home" href="mobile.html"></a>
    </div>

    <div class="share-cover" v-show="shareCover" @click="_shareCover()">
        <img src="/src/img/face/share-cover.png">
    </div>

    <div class="tip-box" v-show="msgTitle" @click="_tipBox()">
        <div class="cover"></div>
        <div class="cont">
            <div class="text">{{msgTitle}}</div>
        </div>
    </div>

</div>
</body>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
<script src="../src/js/config.js"></script>
<script src="../src/js/face.js"></script>
</html>
